<template>
    <div>
<h1>首页</h1>
房型名称：<input type="text" v-model="can.name">
状态：<input type="radio" v-model="can.zhaungtai" :value=true>启用<input type="radio" v-model="can.zhaungtai" :value=false>停用
<input type="button" value="查询" @click="cha">
<input type="button" value="重置" @click="chong">
<table class="table">
<thead>
    <tr>
        <td>房型名称</td>
        <td>门面销售价格</td>
        <td>房间数</td>
        <td>状态</td>
        <td>房间号</td>
        <td>操作</td>      
    </tr>
</thead>
<tbody>
    <tr v-for="a in data">
        <td>{{a.name}}</td>
        <td>￥{{a.jiaGe}}</td>
        <td>{{a.jianShu}}</td>
        <td>{{a.zhuangTai?"启用":"停用"}}</td>
        <td>{{a.fjHao}}</td>
        <td>
            <input type="button" value="删除" @click="shan(a.id)">
            <input type="button" value="修改" @click="xiu(a.id)">
        </td>      
    </tr>
</tbody>
</table>
<input type="button" value="首页" @click="fen(1)">
<input type="button" value="上一页" @click="fen(can.pageindex-1)">
<input type="button" :value="a" v-for="a in page.zongye" @click="xxx(a)">
<input type="button" value="下一页" @click="fen(can.pageindex+1)">
<input type="button" value="尾页" @click="fen(page.zongye)">
<select v-model="can.pagesize" @change="rl">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<input type="number" placeholder="请输入要跳转的页码" v-model="can.pageindex">
<input type="button" value="跳转" @click="tiao">

    </div>
</template>


<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
const route=useRoute()
const router=useRouter()
onMounted(()=>{
    show()
})

//
const ss=ref({
    id:0
})

//修改
const xiu=(re:any)=>{
    router.push({path:'/fan',query:{id:re}})
}

//删除
const shan=(va:any)=>{
  if(!confirm("确认删除吗？")){
    return
  }

  ss.value.id=va
  axios.delete("https://localhost:7206/api/FX/Shan",{params:ss.value}).then(res=>{
    if(res.data>0){
        alert("删除成功了")
        show()
    }else{
        alert("删除失败了")
    }
  })
}

//重置
const chong=()=>{
    can.value.name="",
    can.value.zhaungtai=null
    show()
}

//查询
const cha=()=>{
    show()
}

//跳转页
const tiao=()=>{
    show()
}

//页容量改变
const rl=()=>{
  can.value.pageindex=1;
  show()
}

//页码转换
const xxx=(e:any)=>{
    can.value.pageindex=e;
    show()
}

//分页
const fen=(e:any)=>{
    if(e>=1&&e<=page.value.zongye){
        can.value.pageindex=e
        show()
    }
}



//显示的m
const data=ref([{
      "id": 0,
      "name": "",
      "jiaGe": 0,
      "jianShu": 0,
      "fjHao": "",
      "zhuangTai": true,
    }])

//参数
const can=ref({
    name:"",
    zhaungtai:null,
    pageindex:1,
    pagesize:2
})

//
const page=ref({
    zongye:0,
    zongtiao:0
})

const show=()=>{
    axios.get("https://localhost:7206/api/FX/Show",{params:can.value}).then(res=>{
        data.value=res.data.plist
        page.value.zongtiao=res.data.count
        page.value.zongye=Math.ceil( page.value.zongtiao/can.value.pagesize)
    })
}
</script>
 



<style scoped>

</style>